//***************************合并代码********************
@gray:#ededee;
@gray-dark:#d6d6d6;
@blue:#4058c5;
/*混合*/
.block(@w,@h,@bgColor){
	width: @w;
	height: @h;
	background-color: @bgColor;
}
.radiusBlock(@w,@h,@bgColor,@radius){
	.block(@w,@h,@bgColor);
	/* Gecko browsers */
	-moz-border-radius: @radius; 
	/* Webkit browsers */
	-webkit-border-radius: @radius; 
	/* W3C syntax - likely to be standard so use for future proofing */
	border-radius:@radius;
}
.radius(@radius){
	/* Gecko browsers */
	-moz-border-radius: @radius; 
	/* Webkit browsers */
	-webkit-border-radius: @radius; 
	/* W3C syntax - likely to be standard so use for future proofing */
	border-radius:@radius;
}
.noMarginPadding{
	margin: 0;
	padding: 0;
}
.containTextCenter(@h){
	text-align: center;
	line-height: @h;
}

/*点击查看大图*/
#bigImg{
	width:100%;
}

//***************************分界线********************/

.box_shadow(@right: 0px, @bottom: 4px, @blur: 10px, @spread: 10px, @color: #9A9293){
	-webkit-box-shadow: @right @bottom @blur @spread @color;
	   -moz-box-shadow: @right @bottom @blur @spread @color;
	        box-shadow: @right @bottom @blur @spread @color;
}
.border_radius(@value: 100px){
	-webkit-border-radius: @value;
  	   -moz-border-radius: @value;
 			border-radius: @value;
}
html{
	height: 100%;
}
body{
	min-width: 960px !important;
	background-color: #E8E8E8;
	height:100%;
	.row{
		padding: 0;
		margin: 0;
	}
}
.container-fluid{
	padding: 0;
	margin: 0;
}

//问题上排行条
.center-sorting{
	margin-top: 30px;
	padding: 0;
	// height: 60px;
	
	.sorting-div{
		height: 60px;
		background-color: #FFF;
		.box_shadow(0px, 3px, 4px, -2px, #9C9C9C);

		.sorting-cols{
			float: left;
			height: 60px;
			text-align: center;
			border-right: 1px solid #CECECB;
			span, img{
				position: relative;
				top: 20px;
				cursor: pointer;
			}
			&:first-child{
				width: 20%;
				img{
					top: 16px;
					width: 14%;
				}
				span{
					padding: 0 3px;
					color: #5568D5;
					font: 20px "黑体","宋体",sans-serif;	
				}
			}
			&:nth-of-type(2){
				width: 40%;
			}
			&:nth-of-type(3){
				width: 20%;
				span{
					font: 20px "黑体","宋体",sans-serif;
				}
				img{
					width: 7%;
					top: 17px;
				}
			}
			&:nth-of-type(4){
				width: 20%;
				border: 0px;
				span{
					font: 20px "黑体","宋体",sans-serif;
				}
				img{
					width: 7%;
					top: 17px;
				}
			}
			&.active{
				color: #ED513D;
			}
		}
	}
	.ask-button{
		margin-top: 20px;
		width: 100%;
		float: left;
		img{
			float: right;
			width: 11%;
			cursor: pointer;
		}
	}

}

//首页/问答，中心问题(文章)样式
.center-problem{
	padding: 0;
	margin-bottom: 100px;
	.return_home{
		margin: 30px 0 -10px 0;
		font: 16px "微软雅黑","黑体","宋体",sans-serif;
		color: #4259C7;

	}
	.articles{
		//触发BFC模型，不会高度塌陷。
		float: left;
		//overflow: auto;	//用overflow会导致box-shadow无法正常显示
		margin-top: 25px;
		width: 100%;


		.left-col{
			float: left;
			position: relative;	//用于子元素绝对定位
			width: 13%;
			overflow: hidden;
			div{
				float:left;
				overflow: hidden;
				width: 75%;
				height:0;
				padding-bottom: 75%;
				img{
					float: left;
					width: 100%;
				}
			}
			.left-triangle{
				position: absolute;
				right: 0;
				top: 35%;
				width: 0;
				height: 0;
				padding: 0;
				border-right: 10px solid #FFF;
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;
			}
		}
		.right-col{
			overflow: hidden;
			float: left;
			width: 87%;
			background-color: #FFF;
			.box_shadow(0px, 3px, 4px, -2px, #9C9C9C);

			.problem-details{
				width: 100%;
				padding: 0 3%;
				h5{
					margin: 5px 0;
					font: bold 16px "微软雅黑", "黑体","宋体",sans-serif;
					color: #2e2e2e;
				}
				h5:first-child{
					color: #445bc8;
					margin-top: 20px;
					font: 15px "微软雅黑", "黑体","宋体",sans-serif;
					a{
						text-decoration: none;
						color: #445bc8;
					}
				}
				h6{
					margin: 5px 0 13px 0;
					font: 14px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
					color: #959595;
					white-space: pre;
				}
				p{	//content
					a{
						text-decoration: none;
						white-space: pre;
					}
					margin-bottom: 15px;
					color: #2e2e2e;
					font: 15px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
					word-break: break-all;
				}
				.paintings{
					margin-right: -3%;
					img{
						width: 32.7%;
						padding-right: 3%;
					}
				}
				.tags-showAll{
					margin: 17px 0 13px 0;
					height: 20px;
					img{
						width: 17px;
					}
					.tags{
						position: relative;
						top: 2px;
						padding: 0 5px;
						font: 15px "黑体","宋体",sans-serif;
						color: #959595;
						&.viewNum{
							padding: 0;
						}
					}
					.showAll{
						float: right;
						text-decoration: none;
						margin-right: 6px;
						color: #3964CF;
						font: 17px/20px "黑体","宋体",sans-serif;
						cursor: pointer;
					}	
				}
			}
			.problem-comment{
				//overflow: auto;	//触发BFC
				div{
					float: left;
					width: 50%;
					height: 50px;
					text-align: center;
					border-top: 1px solid #CECECB;
					img{
						position: relative;
						top: 13px;
						width: 17px;
						cursor: pointer;
					}
					.num{
						position: relative;
						top: 15px;
						padding-left: 3px;
						font: 16px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
						color: #959595;
						cursor: pointer;
					}
					//有三列，包括回答
					&.three{
						width: 33.3%;
					}
				}
				.left-zan{
					border-right: 1px solid #CECECB;
				}
				.medium-answer{
					border-right: 1px solid #CECECB;
					cursor: pointer;
				}
				.right-comment{
					cursor: pointer;
					a{
						text-decoration: none;
					}
				}
			}
		}
		.show-comments{
			float: right;
			width: 87%;
			margin: 12px 0 50px 0;

			.bottom-triangle{
				position: relative;
				left: 82%;
				width: 0;
				height: 0;
				border-bottom: 10px solid #FFF;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
			}
			.main-answers{
				display: none;
				width: 100%;
				h2{
					display: none;
					margin: 0;
					text-align: center;
					font: 18px/50px "黑体","宋体",sans-serif;
					background-color: #FFF;
					.box_shadow(0px, 3px, 4px, -2px, #9C9C9C);
				}
				.teacher-new-answer{
					display: none;
					width: 100%;
					padding: 20px;
					margin-bottom: 20px;
					background-color: #FFF;
					.box_shadow(0px, 3px, 4px, -2px, #9C9C9C);
					input{
						width: 70%;
						height: 30px;
						padding-left: 5px;
						font-size: 14px;
						color: #2e2e2e;
						background-color: #F8F8F8;
						border: 1px solid #BDBDBD;
					}
					button{
						margin-left: 10px;
					}		
				}
				.answer-container{
					.box_shadow(0px, 3px, 4px, -2px, #9C9C9C);
					margin-bottom: 20px;
					background-color: #FFF;
					.answerer-info{
						overflow: hidden;
						.answerer-left-col{
							float: left;
							overflow: hidden;
							width: 13%;
							margin-top: 10px;
							div{
								float: right;
								margin-right: 15%;
								width: 57%;
								height: 0;
								padding-bottom: 57%;
								overflow: hidden;
								img{
									float: right;
									width: 100%;
								}
							}
						}
						.answerer-right-col{
							float: left;
							overflow: hidden;
							width: 84%;
							h5{
								margin: 15px 0 3px 0;
								font: 16px "黑体","宋体",sans-serif;
								a{
									color: #3964CF;
									text-decoration: none;
								}
							}
							h6{
								margin: 0 0 5px 0;
								font: 14px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
								color: #8F8F8D;
								white-space: pre;
							}
						}
					}
					.talking-area{
						padding-bottom: 20px;
						.talking-content{
							width: 100%;
							overflow: hidden;	
							div{
								width: 45%;
								margin: 10px 22px 0 22px;
								padding: 10px;
								background-color: #CCF9AA;
								.border_radius(10px);
								p{
									font: 15px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
									color: #2e2e2e;
								}
							}
							.left{
								float: left;
							}
							.right{
								float: right;
								span{
									font: bold 16px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
								}
							}
						}
					}
					.reply{
						display: none;
						padding: 0 20px 20px 20px;
						input{
							width: 70%;
							height: 30px;
							padding-left: 5px;
							font-size: 14px;
							color: #2e2e2e;
							background-color: #F8F8F8;
							border: 1px solid #BDBDBD;
						}
						button{
							margin-left: 10px;
						}
					}
				}

			}
			.main-comments{
				width: 100%;
				.box_shadow(0px, 3px, 4px, -2px, #9C9C9C);
				.comment-content{
					overflow: hidden;		//触发BFC
					width: 100%;
					padding: 2px 0;
					background-color: #FFF;
					border-bottom: 1px solid #CECECB;

					.comment-left-col{
						float: left;
						overflow: hidden;
						width: 13%;
						margin-top: 10px;
						div{
							float: right;
							margin-right: 15%;
							width: 57%;
							height: 0;
							padding-bottom: 57%;
							overflow: hidden;
							img{
								float: right;
								width: 100%;
							}
						}
					}
					.comment-right-col{
						float: left;
						overflow: hidden;
						width: 84%;
						p{
							a{
								text-decoration: none;
								white-space: pre;
							}
							margin-top: 10px;
							font: 15px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
							word-break: break-all;
							span{
								float: right;
								color: #3964CF;
								font: bold 15px "微软雅黑", "黑体","宋体",sans-serif;
								cursor: pointer;
							}
						}
						h5{
							margin: 15px 0 3px 0;
							font: 16px "黑体","宋体",sans-serif;
							a{
								color: #3964CF;
								text-decoration: none;
							}
						}
						h6{
							margin: 0 0 5px 0;
							font: 14px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
							color: #8F8F8D;
							white-space: pre;
						}
					}
				}
			}
			.information{
				background-color: #FFF;
				.box_shadow(0px, 3px, 4px, -2px, #9C9C9C);
				h2{
					margin: 0;
					display: none;
					text-align: center;
					font: 18px/50px "黑体","宋体",sans-serif;
				}
				div{
					textarea{
						display: block;
						width: 90%;
						height: 80px;
						margin-left: 5%;
						font: 15px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
						border: 1px solid #B2B2B2;
						background-color: #F3F3F3;
					}
					button{
						margin: 10px 0 10px 5%;
					}
				}
				.reply{
					display: none;
					.btn-default{
						margin-left: 5px;
					}
				}
			}
		}
	}
}

//详情文章样式
.article-detials{
	padding: 0;
	margin-bottom: 100px;

	.return_home{
		margin: 30px 0 -10px 0;
		font: 16px "微软雅黑","黑体","宋体",sans-serif;
		color: #4259C7;

	}
	.articles{
		//触发BFC模型，不会高度塌陷。
		float: left;
		width: 100%;
		margin-top: 25px;
		padding: 0 3%;
		background-color: #FFF;

		h5{
			margin: 20px 0 5px 0;
			font: bold 16px "微软雅黑", "黑体","宋体",sans-serif;
			color: #445bc8;
		}
		h6{
			margin: 5px 0 13px 0;
			font: 14px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
			color: #959595;
			white-space: pre;
		}
		p{	//content
			color: #2e2e2e;
			font: 15px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
			margin-bottom: 15px;
		}
		.paintings{
			margin-right: -3%;
			img{
				width: 32.7%;
				padding-right: 3%;
			}
		}
		.tags-showAll{
			margin: 17px 0 13px 0;
			height: 20px;
			img{
				width: 17px;
			}
			.tags{
				position: relative;
				top: 2px;
				padding: 0 5px;
				font: 15px "黑体","宋体",sans-serif;
				color: #959595;
				&.viewNum{
					padding: 0;
				}
			}
		}
			
	}
}

//右方用户信息(带头像)
.user-info{
	float: left;
	padding: 0;
	margin-top: 30px;
	.box-info{
		float: left;
		margin-left: 10%;
		width: 70%;
		background-color: #FFF;
		color: #2e2e2e;
		text-align: center;
		
		.image-info{
			margin-top: 20px;
			overflow: hidden;
			img{
				width: 37%;
			}
		}
		h3{
			margin: 10px 0 20px 0;
			font: bold 22px "宋体",sans-serif;
			word-break: break-all;
		}
		.concern_fan_info{
			float: left;
			width: 100%;
			div{
				float: left;
				width: 50%;
				margin-bottom: 20px;
				h4{
					margin: 0;
					font-size: 16px;
				}
				h5{
					font-size: 14px;
					a{
						color: #959595;
					}
				}
			}
			.left-concern{
				border-right: 1px solid #D1D1D1;
			}
		}
	}
	.view-info{
		float: left;
		width: 70%;
		margin-left: 10%;
		margin-top: 30px;
		color: #959595;
		font: 16px "Microsoft YaHei","黑体","宋体",sans-serif;
	}
	.info-button{
		float: left;
		width: 70%;
		margin-left: 10%;
		margin-top: 30px;
		img{
			width: 100%;
			cursor: pointer;
		}
	}
}

//右方用户信息(列表)
.side_menu{
	padding: 0 0 0 10px;
	margin-top: 30px;


	.side_container{
		width: 75%;
		margin-left: 10%;
	}
	.banner{
		margin-bottom: 10px;
		padding: 10%;
		.radiusBlock(100%,58%,white,2px);
		.box_shadow(0,0,1px,1px,@gray-dark);
		img{
			width: 80%;
		}
	}
	.banner :hover{
		cursor:pointer;
	}
	.banner img{
		width: 100%;
	}

	.side_menu_btn_container{
		.radiusBlock(100%,100%,white,2px);
		.box_shadow(0,0,1px,1px,@gray-dark);
		.side_menu_btnset{
			.noMarginPadding;
			list-style: none;
			li{
				padding: 0 10%;
				@h:36px;
				width: 100%;
				height: @h;
				line-height: @h;
				position: relative;
				.side_menu_btnIcon{
					.block(19px,18px,transparent);
					float: left;
					margin: 8px 10px;
					img{
						float: right;
					}
				}
				a{
					display:inline-block;
					text-decoration: none;
				}
				.side_menu_btnTag{
					.radiusBlock(35px,20px,@gray-dark,10px);
					float: right;
					margin: 8px 10px;
					color: white;
					.containTextCenter(20px);
				}
			}
		}

		#side_menu_btnset1:after{
			background-color: @gray;  
			margin: 10px auto;
			bottom: 0;  
			content: "";  
			display: block;   
			position: relative;  
			top: 0px;  
			left: 0px;
			width: 80%; 
			height: 1px;
		}
	}
}

//首页详情，右方画室信息
.studio-info{
	padding: 0;
	margin-top: 30px;

	.studio-container{
		float: left;
		width: 75%;
		margin-left: 10%;
		background-color: #FFF;

		.avatar_studioName{
			width: 100%;
			overflow: auto;
			padding-top: 15px;
			.left-col{
				float: left;
				overflow: hidden;
				width: 135px;
				height: 100px;
				text-align: center;
				img{
					width: 100px;
				}
			}
			//左列固定，右列自适应
			.right-col{
				overflow: auto;
				h1{
					margin: 0 0 4px 0;
					color: #2e2e2e;
					font: 16px "Microsoft YaHei", "微软雅黑", "黑体","宋体",sans-serif;
					a{
						color: #2e2e2e;
					}
				}
				img{
					display: block;
					width: 90px;
					margin-top: 6px;
					cursor: pointer;
				}
			}
		}
		.studio-list-info{
			list-style: none;
			padding: 0;
			margin: 15px 0 15px 5%;
			li{
				width: 100%;
				margin-top: 10px;
				font: 14px "Microsoft YaHei", "微软雅黑", "黑体","宋体",sans-serif;
				color: #2e2e2e;

				a{
					float: right;
					margin-right: 3%;
					color: #3f55c4;
				}
			}
		}
	}
}

//修改个人信息
.update-user-info{
	margin: 30px 0 100px 0;
	padding: 0;
	background-color: #FFF;
	h1{
		float: left;
		margin: 20px;
		font: bold 15px "Microsoft YaHei", "微软雅黑", "黑体","宋体",sans-serif;
	}
	.return_home{
		float: left;
		width: 100%;
		border-bottom: 1px solid #c9c9c9;
		a{
			float: right;
			margin: 20px;
			color: #3f55c4;
			font: bold 15px "Microsoft YaHei", "微软雅黑", "黑体","宋体",sans-serif;
		}
	}
	.updateAvatar{
		float: left;
		width: 100%;
		border-bottom: 1px solid #c9c9c9;
		.avatarCotainer{
			float: left;
			overflow: hidden;
			margin: 20px 20px 20px 0;
			width: 100px;
			height: 100px;
			img{
				width: 100%;
			}
		}
		.select-button{
			// float: left;
			overflow: hidden;
			margin: 20px 0 0 0;
			img{
				display: block;
				width: 120px;
				cursor: pointer;
			}
			h3{
				margin: 10px 0 0 0;
				font: 13px "Microsoft YaHei", "微软雅黑", "黑体","宋体",sans-serif;
				color: #959595;
			}
			button{
				display: none;
				margin-top: 10px;
			}
			form{
				display: none;
			}
		}
	}
	.updateInfo>div{
		float: left;
		width: 100%;
	}
	.updateInfo{
		float: left;
		width: 100%;
		input{
			width: 120px;
			padding-left: 5px;
			margin-top: 20px;
			font-size: 14px;
			color: #2e2e2e;
			background-color: #F8F8F8;
			border: 1px solid #BDBDBD;
		}
		.name{
			input{
				width: 200px;
			}
		}
		.gender{
			input{
				display: none;
			}
			div{
				float: left;
				width: 50px;
				margin: 20px 20px 0 0;
				cursor: pointer;
				span{
					font: 14px "Microsoft YaHei", "微软雅黑", "黑体","宋体",sans-serif;
					color: #2e2e2e;
				}
			}
		}
		.area{
			span{
				font: bold 15px "Microsoft YaHei", "微软雅黑", "黑体","宋体",sans-serif;
				padding-right: 20px;
			}
		}
		.grade{
			select{
				margin-top: 20px;
				width: 120px;
				padding: 1px 1px;
			}
		}
	}
	.submit-div{
		width: 100%;
		float: left;
		img{
			height: 40px;
			float: right;
			margin: 20px;
			cursor: pointer;
		}
	}
}

/*footer*/
.footer{
	.block(100%,170px,white);
	font-family: "黑体","宋体",sans-serif;
	margin-top: 20px;
	margin-top: 20px;
	padding:20px;
	border-top: 2px solid @gray-dark;
	.footerContent{
		width: 80%;
		height: 130px;
		position: relative;
		margin: 0 auto;
		.footerList{
			list-style: none;
			padding: 0;
			float: left;
			li{
				margin: 10px 0;
			}	
		}
		.icp{
			color: @gray-dark;
			position: absolute;
			bottom: 0;
			left: 0;
		}
		h2{
			color: @blue;
			position: absolute;
			bottom: 0px;
			right: 0px;
		}

	}

}